<template>
	<view :style="theme">
		<view class="login flex flex_center">
			<image :src="logo" mode="widthFix"></image>
			<!-- <view class="flex xieyi mb3">
				<view class="checkboxBoxD" @click="isTy">
					<view class="checkboxBox" :class="isActive?'on':''">
						<u-icon v-if="isActive" name="checkmark-circle-fill" size="44rpx"></u-icon>
					</view>
				</view>
				<view>我已阅读并同意<text class="xywz" @click="showxy">《用户协议》</text></view>
			</view> -->
			<button type='primary' class="sqBtn" v-if="!isActive" @click="pdxy">授权手机号</button>
			<button type='primary' class="sqBtn" v-if="isActive" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">授权手机号</button>
			<button type='primary' class="sqBtn"  @click="fhBtn" style="margin-top: 30rpx;background-color: #999;">拒绝授权</button>
		</view>
		<u-popup :show="agreement" @close="showxy" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">用户协议</view>
				<scroll-view class="swiper-scroll" scroll-y="true">
					<u-parse :content="xy"></u-parse>
				</scroll-view>
				<view class="agreement_foot flex">
					<view style="opacity: 1" @click="showxy">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup ref="privacyComponent" @agree-privacy="onAgreePrivacy"
			@reject-privacy="onRejectPrivacy"></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
	export default {
		components: {
			PrivacyPopup
		},
		data() {
			return {
				xy: '',
				logo: '',
				agreement: false,
				isActive: false,
			}
		},
		onShow() {
			this.logo = uni.getStorageSync('logo');
			let that = this
			uni.login({
				// #ifdef MP-WEIXIN
				provider: 'weixin',
				// #endif 
				// #ifdef MP-TOUTIAO
				provider: 'toutiao',
				// #endif 
				success: (loginRes) => {
					that.$app.ajax({
						data: {
							param: {
								code: loginRes.code
							}
						},
						api: that.$api.getUser()
					}).then((res) => {
						that.$store.commit('setOpenId', res.record.openId)
						that.$app.ajax({
							data: {
								param: {
									openId: res.record.openId
								}
							},
							api: that.$api.getSessionId()
						}).then((resb) => {
							setTimeout(() => {
								// that.getYx()
								that.getMemberInformation()
								that.$app.ajax({
									data: {
										param: {}
									},
									api: that.$api.getRenovationInfo()
								}).then((resc) => {
									if (resc.errorCode === '000000' && resc.record) {
									  let val = resc.record || {}
									  that.$store.commit('setColor', val.color1);
									  that.$store.commit('setImgHost', val.path);
									  that.$store.commit('setRenovationInfo', val)
									  let theme = '--color:' + val.color1 + '; --phb:linear-gradient(270deg, ' + val.color1 + ' 0%, ' + val.color2 + ' 100%);' + '--more-color:' + val.color3 + ';--color2:' + val.color2 + ';--blue-bg:linear-gradient(270deg, ' + val.color3 + ' 0%, ' + val.color4 + ' 100%);'
									  that.$store.commit('setTheme', theme);
									  let tabUrl = val.navigationList.map(e=>e.url)
									  that.$store.commit('setTabUrl', tabUrl);
									}
								})
								that.$app.ajax({
									data: {
										param: {
											codes: 'RESOURCE_PATH'
										}
									},
									api: that.$api.getUrl()
								}).then((resc) => {
									that.$store.commit(
										'setOssHost', resc
										.recordList[0]
										.val)
								})
							}, 200)
						})
					}).catch(() => {})
				}
			})
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			fhBtn() {
				uni.navigateBack({
					delta: 1
				})
			},
			onAgreePrivacy() {
				// 用户同意隐私政策
				// 在这里添加您想要执行的代码
				this.isActive = true
				console.log('User agreed to the privacy policy');
			},
			onRejectPrivacy() {
				// 用户拒绝隐私政策
				// 在这里添加您想要执行的代码
				console.log('User rejected the privacy policy');
			},
			isTy() {
				this.isActive = !this.isActive
			},
			showxy() {
				this.agreement = !this.agreement
			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_USER'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.xy = res.recordList[0].value
					}
				}).catch(() => {})
			},

			pdxy() {
				this.$app.showToast('请先同意协议')
				this.$refs.privacyComponent.showPrivacy = true
			},
			getMemberInformation() {
				this.$app.ajax({
					data: {
						param: {}
					},
					api: this.$api.memberInformation()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$store.commit('saveUserInfo', res.record);
						this.$store.commit('setVenue', true);
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch(() => {})
			},

			getPhoneNumber(e) {
				if (!this.isActive) {
					this.$app.showToast('请先同意协议')
					return false
				}
				let that = this
				console.log(12312, e)
				if (e.detail.errMsg === 'getPhoneNumber:fail user deny') return
				// 用户同意
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					const openId = uni.getStorageSync('openId')
					if (!openId) false
					this.$app.ajax({
						data: {
							param: {
								code: e.detail.code,
								openId
							}
						},
						api: that.$api.register()
					}).then((res) => {
						if (res.errorCode == '000000') {
							that.getMemberInformation()
						}
					}).catch(() => {})
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.login {
		height: 90vh;
		flex-direction: column;

		image {
			width: 500rpx;
			margin-bottom: 100rpx;
		}

		.wxName {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: Medium;
			color: #222222;
			width: 690rpx;
			padding-bottom: 80rpx;
			margin-bottom: 80rpx;
			border-bottom: 1px solid #E5E5E5;
		}

		.xieyi {
			font-size: 32rpx;
			width: 690rpx;
			margin: 20rpx auto;
		}

		.sqBtn {
			background-color: $color;
			line-height: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			width: 690rpx;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.xywz {
		color: $color;
	}
</style>